<template>
    <div class="search-box">
        <div class="flex">
            <div>
                <el-icon>
                    <Search />
                </el-icon><span>筛选搜索</span>
            </div>
            <div>
                <el-button @click="resetForm">重置</el-button>
                <el-button @click="submitFn" type="primary">查询搜索</el-button>
            </div>
        </div>
        <div style="padding-top: 20px">
          <ElConfigProvider :locale="zhCn">
            <el-form @submit.prevent="submitFn" :model="form" ref="searchFormRef">
                <el-form-item label="输入搜索:" prop="id" label-width="120px">
                    <el-input @keydown.native.enter ="submitFn" v-model="form.id" placeholder="服务单号" style="width: 215px"></el-input>
                </el-form-item>
                <el-form-item label="处理状态:" prop="status" label-width="120px">
                    <el-select v-model="form.status" clearable placeholder="全部">
                        <el-option label="待处理" value="0" />
                        <el-option label="退货中" value="1" />
                        <el-option label="已完成" value="2" />
                        <el-option label="已拒绝" value="3" />
                    </el-select>
                </el-form-item>
                <el-form-item label="申请时间:" prop="createTime" label-width="120px">
                    <el-col :span="11">
                        <el-date-picker v-model="form.createTime" type="date" placeholder="请选择时间" />
                    </el-col>
                </el-form-item>
                <el-form-item label="操作人员:" prop="handleMan" label-width="120px">
                    <el-input v-model="form.handleMan" placeholder="全部" style="width: 215px"></el-input>
                </el-form-item>
                <el-form-item label="处理时间:" prop="handleTime" label-width="120px">
                    <el-col :span="11">
                        <el-date-picker v-model="form.handleTime" type="date" placeholder="请选择时间" />
                    </el-col>
                </el-form-item>
            </el-form>
          </ElConfigProvider>
        </div>
    </div>
    <div class="list">
        <el-icon><Tickets /></el-icon>数据列表
    </div>
    
    <el-table
    :data="tableData.list"
    border
    ref="multipleTableRef"
    style="width: 100%"
    @selection-change="handleSelectionChange"
    >
        <el-table-column type="selection" width="55" />
        <el-table-column label="服务单号" prop="id" align="center"></el-table-column>
        <el-table-column label="申请时间" prop="createTime" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.createTime) }}
            </template>
        </el-table-column>
        <el-table-column label="用户账号" prop="memberUsername" align="center"></el-table-column>
        <el-table-column label="退款金额" prop="productRealPrice" align="center">
            <template #default="scope">
                <span>￥{{scope.row.productRealPrice}}</span>
            </template>
        </el-table-column>
        <el-table-column label="申请状态" prop="status" align="center">
            <template #default="scope">
                <span v-if="scope.row.status===0">待处理</span>
                <span v-else-if="scope.row.status===1">退货中</span>
                <span v-else-if="scope.row.status===2">已完成</span>
                <span v-else="scope.row.status===3">已拒绝</span>
            </template>
        </el-table-column>
        <el-table-column label="处理时间" prop="handleTime" align="center">
            <template #default="scope">
                {{ fomatDate(scope.row.handleTime) }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right">
            <template #default="scope">
                <el-button @click="router.push(`/oms/returnApplyDetail?id=${scope.row.id}`)">查看详情</el-button>
            </template>
        </el-table-column>
    </el-table>

    <div class="bottom">
        <div class="left">
            <el-form-item prop="keyword">
                <el-select v-model="del" placeholder="批量删除">
                    <el-option label="批量发货" value="fahuo" />
                    <el-option label="关闭订单" value="guanbi" />
                    <el-option label="删除订单" value="shanchu" />
                </el-select>
            </el-form-item>
            <el-button type="primary">确定</el-button>
        </div>
        <ElConfigProvider :locale="zhCn">
            <el-pagination
            v-model:currentPage="form.pageNum"
            v-model:page-size="form.pageSize"
            :page-sizes="[5,10,15]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChagne"
            @current-change="currentChange"
            />
        </ElConfigProvider>
    </div>
</template>

<script setup lang='ts'>
import { ElConfigProvider, FormInstance } from 'element-plus'
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { Search, Tickets } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import { user } from '@/api';
import { fomatDate } from "@/utils";
import { useRouter } from 'vue-router';

const router = useRouter()

interface Form {
    id: string, //输入搜索
    status: string, //处理状态
    createTime: string, //申请时间
    handleMan: string, //操作人员
    handleTime: string, //处理时间
    pageNum: number,
    pageSize: number,
}

// 搜索的数据
const form = reactive<Form>({
    id: '', //输入搜索
    status: '', //处理状态
    createTime: '', //申请时间
    handleMan: '', //操作人员
    handleTime: '', //处理时间
    pageNum: 1,
    pageSize: 10,
})

const del = ref('')

// 表格的数据
const tableData = reactive({
    list: [],
})

let total = ref(0) //总条数

interface User {
  date: string
  name: string
  address: string
}

// 封装请求页面数据
const getData=()=>{
    user.returnApplyApi(form).then((res)=>{
        tableData.list = res.data.list;
        total.value = res.data.total;
    })
}
// 请求回来的数据赋给tableData进行页面渲染
getData()


const multipleSelection = ref<User[]>([])
//表格的选择按钮
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}

// 重置
const searchFormRef = ref<FormInstance>();
const resetForm = () => {
  searchFormRef.value?.resetFields();
};
// 查询搜索
const submitFn = () => {
    getData();
}

// 分页器
const currentChange =()=>{
    getData()
}
const pageSizeChagne =()=>{
    getData()
}


</script>




<style lang="less" scoped>
// 筛选搜索部分
.search-box {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;

    .flex {
        display: flex;
        justify-content: space-between;
    }
    // 组件部分
    form {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .el-form-item {
            flex: 33%;
        }
    }
    // 伪类生成器  解决弹性布局对不齐问题
    form::after {
            display: 'block';
            content: "";
            width: 33%;
        }

}
// 修改提交时间框的样式
.el-input__wrapper{
    width: 200px;
}
// 数据列表
.list{
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
}

// 底下部分
.bottom{
    display: flex;
    justify-content: space-between;
    .left{
        display: flex;
        margin-top: 20px;
        .el-button{
            margin-left: 10px;
        }
    }
}
</style>